import React, {Fragment} from 'react';
import { createModalContainer } from '@/components/changeModal';
import {Button, message, Form, Row, Input,Table,Card} from 'antd';
import { connect } from 'dva';
import modalstyles from './modal.less';
import styles from './index.less';

const FormItem = Form.Item;
const { TextArea } = Input;

@Form.create()
class AddCouponComponent extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        cardList: null,
        dataSource:[],
        selectedRowKeys: [],
        paginationProps: {
            showSizeChanger: true,
            showQuickJumper: false,
            showTotal: total => `共 ${total} 条记录`,
            pageSize: 10,
            total: 0,
            pageIndex: 1,
          },
      }
  }
  componentWillMount() {
    window.Isoption = false;
  }
  componentDidMount() {
    window.Isoption = true;
    this.requestCouponList()
  }

  requestCouponList =(params) => {
    const { dispatch} = this.props;
    const { paginationProps: { pageIndex, pageSize }} = this.state;
    dispatch({
        type: 'marketing/GetCouponsListWithPage',
        payload: {
            PageIndex: pageIndex, //页码
            PageSize: pageSize, //页数
            Name: params&& params.Name?params.Name:'',
            Status: 0
        },
        callBack: {
            success: res => {
                if(res.Code ===0) {
                    this.setState({
                        paginationProps: {
                            ...this.state.paginationProps,
                            total: res.Data.Total
                        },
                        dataSource: res.Data?res.Data.DataList:[],
                    })
                }
            },
            error: res=> {
                console.log(res.Msg)
            }
        }
    })
}

//取消
handleCancel =() => {
  this.props.cancel();
}


handleSubmit =(e) => {
    e.preventDefault();
    const { dispatch } = this.props;    
    this.props.form.validateFields(async (err, values) => {
        if(!err) {
            dispatch({
                type:'customerList/ChangePoints',
                payload: {
                    MemberIds: [this.props.param.MemberId],
                    Point: values.Point,
                    Remark: values.Remark
                },
                callback: {
                    success: res => {
                        if(res.Code ===0) {
                            message.success('保存成功');
                            this.setState({
                                isFetching: false
                            }, () => {
                                this.props.ok();
                            })
                        }
                    },
                    error: res => {
                        console.log(res);
                        this.setState({
                            isFetching: false
                        });
                        message.error(res.Msg)
                    }
                }
            })
        } else {
            this.setState({
                isFetching: false
            })
        }
    })
}

onSelectChange = (selectedRowKeys) => {
    this.setState({ selectedRowKeys });
  }

    render() {
      const {getFieldDecorator} = this.props.form;
      const {dataSource, selectedRowKeys } = this.state;
      const columns = [
            {
                title: '优惠券名称',
                dataIndex: 'Name',
                key: 'Name',
            },
            {
                title: '适用商品',
                dataIndex: 'Goods',
                key: 'Goods',
            },
            {
                title: '优惠内容',
                dataIndex: 'FormativeContext',
                key: 'FormativeContext',
            },
            {
                title: '限领次数',
                dataIndex: 'TotalUsed',
                key: 'TotalUsed',
            },
            {
                title: '状态',
                dataIndex: 'StatusName',
                key: 'StatusName',
            },
            {
                title: '剩余库存',
                dataIndex: 'TotalSurplus',
                key: 'TotalSurplus',
                align: 'right',
            },
          ]
        const rowSelection = {
        selectedRowKeys,
        onChange: this.onSelectChange,
        };
      const formItemLayout = {
        labelCol: {
            span: 6,
          },
          wrapperCol: {
            span: 16,
          },
      }
      const hasSelected = selectedRowKeys.length > 0;
        return (
          <Form onSubmit={this.handleSubmit} style={{marginTop: 24}}>
          <Card bordered={false}>
            <Table
                    columns={columns}
                    dataSource ={dataSource}
                    rowKey={record => record.Id}
                    onChange={this.onTableChange}
                    pagination={this.state.paginationProps}
                    rowSelection={rowSelection}
                />
          </Card>

            <FormItem className={modalstyles.footBtn}>
                <Button onClick={this.handleCancel} style={{marginRight: 16}}>
                    取消
                </Button>
                <Button
                    type="primary"
                    htmlType="submit"
                    loading={this.state.isFetching}
                    disabled={!hasSelected}
                >
                    确认
                    <span>{hasSelected ?selectedRowKeys.length:''}</span>
                </Button>
            </FormItem>
      </Form>
        )
    }
}

const AddCoupon = createModalContainer(
    connect(({customerList, global, loading}) => ({
        memberInfo: customerList.memberInfo
    }))(AddCouponComponent),
    true,
    true
);

export default AddCoupon;
